<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-04-17 18:02:29
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-20 13:45:57
 * @FilePath: /free-learning-front/src/views/profileView.vue
 * @Description: 个人中心页面
-->
<template>
  <div class="profile-container">
    <!-- 头部信息 -->
    <div class="profile-header">
      <div class="avatar-section">
        <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
        <h2>{{ userInfo.nickname || userInfo.username }}</h2>
        <p class="role"><el-icon><UserFilled /></el-icon> {{ userInfo.roleNames }}</p>
      </div>
    </div>

    <!-- 主要信息 -->
    <div class="profile-content">
      <!-- 基本信息 -->
      <div class="info-section">
        <h3><el-icon><InfoFilled /></el-icon> 基本信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <el-icon><User /></el-icon>
            <span class="label">用户名</span>
            <span class="value">{{ userInfo.username }}</span>
          </div>
          <div class="info-item">
            <el-icon><Edit /></el-icon>
            <span class="label">昵称</span>
            <span class="value">{{ userInfo.nickname }}</span>
          </div>
          <div class="info-item">
            <el-icon><Iphone /></el-icon>
            <span class="label">手机号</span>
            <span class="value">{{ userInfo.mobile }}</span>
          </div>
          <div class="info-item">
            <el-icon><Message /></el-icon>
            <span class="label">邮箱</span>
            <span class="value">{{ userInfo.email || '未设置' }}</span>
          </div>
          <div class="info-item">
            <el-icon><Female /></el-icon>
            <span class="label">性别</span>
            <span class="value">{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '保密' }}</span>
          </div>
          <div class="info-item">
            <el-icon><Calendar /></el-icon>
            <span class="label">注册时间</span>
            <span class="value">{{ userInfo.createTime }}</span>
          </div>
        </div>
      </div>

      <!-- 学术信息 -->
      <div class="info-section">
        <h3><el-icon><School /></el-icon> 学术信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <el-icon><Collection /></el-icon>
            <span class="label">学历</span>
            <span class="value">{{ userInfo.academicDegreeName || '未设置' }}</span>
          </div>
          <div class="info-item">
            <el-icon><School /></el-icon>
            <span class="label">所属学校</span>
            <span class="value">{{ userInfo.schoolName || '未设置' }}</span>
          </div>
        </div>
      </div>

      <!-- 专业领域 -->
      <div class="info-section" v-if="userInfo.expertiseList?.length">
        <h3><el-icon><Medal /></el-icon> 专业领域</h3>
        <div class="expertise-tags">
          <el-tag
            v-for="expertise in userInfo.expertiseList"
            :key="expertise.expertiseId"
            class="expertise-tag"
            type="success"
            effect="light"
          >
            <el-icon><Trophy /></el-icon>
            <span>{{ expertise.expertiseName }}</span>
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryProfile, type UserPageVO } from '@/api/user';
import { onMounted, ref } from 'vue';
import { 
  Plus,
  User,
  UserFilled,
  Edit,
  Iphone,
  Message,
  Female,
  Calendar,
  School,
  Collection,
  Medal,
  Trophy,
  InfoFilled
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import FileAPI from '@/api/file';
import { useUserStore } from '@/store/modules/user';

defineOptions({
  name: 'ProfileView'
})

const userStore = useUserStore();
const userInfo = ref<UserPageVO>({} as UserPageVO);

onMounted(() => {
  queryProfile().then((res) => {
    userInfo.value = res;
  });
});

// 头像上传相关方法
const customUpload = async ({ file }: { file: File }) => {
  try {
    const result = await FileAPI.upload(file);
    handleAvatarSuccess(result);
  } catch (error) {
    ElMessage.error('上传失败');
  }
};

const handleAvatarSuccess = (response: { url: string }) => {
  userInfo.value.avatar = response.url;
  userStore.updateAvatar(response.url);
  ElMessage.success('头像更新成功');
};

const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    ElMessage.error('头像图片只能是 JPG 或 PNG 格式!');
  }
  if (!isLt2M) {
    ElMessage.error('头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
};
</script>

<style scoped>
.profile-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

.profile-header {
  margin-bottom: 24px;
  text-align: center;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.avatar-uploader {
  position: relative;
  cursor: pointer;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-uploader-icon {
  font-size: 24px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.role {
  color: #666;
  font-size: 14px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.info-section h3 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;
}

.info-section h3 .el-icon {
  color: #409eff;
  font-size: 18px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background-color: #f0f2f5;
}

.info-item .el-icon {
  color: #409eff;
  margin-right: 8px;
  font-size: 16px;
}

.label {
  color: #666;
  min-width: 70px;
  margin-right: 12px;
  font-size: 14px;
}

.value {
  color: #333;
  flex: 1;
  font-size: 14px;
}

.expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.expertise-tag {
  padding: 6px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

.expertise-tag:hover {
  transform: translateY(-1px);
}

.expertise-tag .el-icon {
  font-size: 14px;
}

@media (max-width: 768px) {
  .profile-container {
    padding: 12px;
  }

  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .info-section {
    padding: 16px;
  }
}
</style>